<!-- 打赏组件 -->

<template>
  <div id="kefuPopupComponent">
    <popup v-model="curStatus" @on-hide="hideMask">
      <slot name='content'>
        <div class="kefuPopup-container">
          <img src="static/image/public/closeIcon.png" class="kefuPopup-close" alt="关闭" @click='hideMask'>
          <img :src="kefuHead" class="kefuPopup-header" alt="客服头像">
          <p class="kefuPopup-name">{{kefuName}}</p>
          
          <div class="kefuPopup-wx">
            <img src="static/image/public/wxIcon.png" class="kefuPopup-icon" alt="微信">
            <span class="kefuPopup-txt">{{kefuWx}}</span>
            <span class="kefuPopup-copy" :data-clipboard-text='kefuWx' @click="copyWxNum">复制</span>
          </div>

          <div class="kefuPopup-open" @click='openWx'>打开微信</div>
        </div>
       </slot>
    </popup>
  </div>
</template>

<script>
  import { Popup } from 'vux'
  import tool from '@/assets/js/tool.js';

  export default {
    props:{
      showStatus:{
        type:Boolean,
        default:false
      },
      kefuHead:{
        type:String,
        default:'static/image/public/kefuHeader.png'
      },
      kefuWx:{
        type:String,
        default:'xuntianyisuan'
      },
      kefuName:{
        type:String,
        default:'大师助手'
      }
    },
    components:{
      Popup
    },
    data:function(){
      return {
        curStatus:this.showStatus
      }
    },
    watch:{
      showStatus:function(val){
        this.curStatus = val;
      },
      curStatus:function(val){
        this.$emit('changeStatus',val)
      }
    },
    methods:{
      hideMask:function(){
        this.curStatus = false;
      },
      copyWxNum:function(){
        tool.copyContent(this,'.kefuPopup-copy');
      },
      openWx:function(){
        tool.openWx();
      }
    }
  }
</script>

<style lang="less" scoped>
  @themeColor:#FDC065;
  .kefuPopup-container{
    background: white;
    overflow: hidden;
    position: relative;
    padding: 0 175px;
    text-align: center;
    .kefuPopup-close{
      position: absolute;
      top: 30px;
      right: 30px;
      width: 30px;
      height: 30px;
    }
    .kefuPopup-header{
      width: 150px;
      height: 150px;
      border-radius: 50%;
      display: block; 
      margin: 30px auto 10px; 
    }
    .kefuPopup-name{
      color: #333;
      font-size: 32px;
    }
    .kefuPopup-wx{
      margin: 40px 0;
      display: flex;
      align-items: center;
      justify-content: center;
      .kefuPopup-icon{
        width: 36px;
        height: 36px;
        vertical-align: text-bottom;
      }
      .kefuPopup-txt{
        color: #333;
        font-size: 30px;
        margin: 0 20px 0 8px;
      }
      .kefuPopup-copy{
        font-size: 30px;
        color: @themeColor;
        text-decoration: underline;
      }
    }
    .kefuPopup-open{
      margin-bottom: 40px;
      height:84px;
      line-height: 84px;
      color: white;
      font-size: 36px;
      background:linear-gradient(90deg,rgba(253,196,111,1),rgba(254,172,50,1));
      border-radius:10px;
    }
  }
  
</style>